{% extends 'home/index.html'%}

{% block title %}
<title>我的购物车</title>
{% endblock %}

{% block css %} <link href="/static/home/css/cartstyle.css" rel="stylesheet"
type="text/css" /> <link href="/static/home/css/optstyle.css" rel="stylesheet"
type="text/css" /> 
{% endblock %}

{% block con %}
<div class="concent">
    <div id="cartTable">
        <div class="cart-table-th">
            <div class="wp">
                <div class="th th-chk">
                    <div id="J_SelectAll1" class="select-all J_SelectAll"></div>
                </div>
                <div class="th th-price">
                    <div class="td-inner">主图</div>
                </div>
                <div class="th th-price">
                    <div class="td-inner">名称</div>
                </div>
                <div class="th th-price">
                    <div class="td-inner">单价</div>
                </div>
                <div class="th th-amount">
                    <div class="td-inner">数量</div>
                </div>
                <div class="th th-sum">
                    <div class="td-inner">小计</div>
                </div>
                <div class="th th-op">
                    <div class="td-inner">操作</div>
                </div>
            </div>
        </div>
        <div class="clear"></div>

        <tr class="item-list">
            <div class="bundle  bundle-last ">
                <div class="bundle-hd">
                    
                </div>
                <div class="clear"></div>
                <div class="bundle-main">
                    {% for v in data %}
                    <ul class="item-content clearfix">
                        <li class="td td-chk">
                            <div class="cart-checkbox ">
                                <input class="check shanchu" name="items[]" value="{{ v.id }}" type="checkbox">                             
                            </div>
                        </li>
                        <li class="td td-item" style="width: 238px" >
                            <div class="item-pic">
                                <a href="#" target="_blank" data-title="{{ v.goodsid.title }}" class="J_MakePoint" data-point="tbcart.8.12">
                                <img src="{{ v.goodsid.pic_url }}" class="itempic J_ItemImg" style="width: 99px"></a>
                            </div>
                            <div class="item-info" style="width: 99px" >
                                <div class="item-basic-info">
                                    <a href="#" target="_blank" title="{{ v.goodsid.title }}" class="item-title J_MakePoint" data-point="tbcart.8.11">{{ v.goodsid.title }}</a>
                                </div>
                            </div>
                        </li>
                        <li class="td td-price">
                            <div class="item-price price-promo-promo">
                                <div class="price-content">
                                    <div class="price-line">
                                        <em class="J_Price price-now " tabindex="0">{{ v.goodsid.price }}</em>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="td td-amount">
                            <div class="amount-wrapper ">
                                <div class="item-amount ">
                                    <div class="sl">
                                        <input class="min am-btn" name=""  type="button" value="-" />
                                        <input class="text_box cartnum" name="" cartid="{{ v.id }}" type="text" value="{{ v.num }}" style="width:30px;" />
                                        <input class="add am-btn" name=""  type="button" value="+" />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="td td-sum">
                            <div class="td-inner">
                                <em tabindex="0" class="J_ItemSum number">
                                {% load pagetag %}
                                {% cartxj v.num v.goodsid.price %}
                            </em>
                            </div>
                        </li>
                        <li class="td td-op">
                            <div class="td-inner">
                                <a href="javascript:void(0)" data-point-url="#" class="delete">删除</a>
                            </div>
                        </li>
                    </ul>   
                    {% endfor %}                
                </div>
            </div>
        </tr>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>

    <div class="float-bar-wrapper">
        <div id="J_SelectAll2" class="select-all J_SelectAll">
            <div class="cart-checkbox">
                <input class="check-all check" id="J_SelectAllCbx2" name="select-all" value="true" type="checkbox">
                <label for="J_SelectAllCbx2"></label>
            </div>
            <span>全选</span>
        </div>
        <div class="operations">
            <a href="#" hidefocus="true" class="deleteAll">删除</a>
        </div>
        <div class="float-bar-right">
            <div class="amount-sum">
                <span class="txt">已选商品</span>
                <em id="J_SelectedItemsCount">0</em><span class="txt">件</span>
                <div class="arrow-box">
                    <span class="selected-items-arrow"></span>
                    <span class="arrow"></span>
                </div>
            </div>
            <div class="price-sum">
                <span class="txt">合计:</span>
                <strong class="price">¥<em id="J_Total">0.00</em></strong>
            </div>
            <div class="btn-area">
                <a href="javascript:void(0)" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
                <span>结&nbsp;算</span></a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$(function(){
    // 给结算绑定单机事件
    $("#J_Go").click(function(){
        // 获取 所选的购物车id
        var cartids = ComputerNumAndPrice()
        // 判断是否选择了商品
        if(!cartids.length){
            // 没有选择商品
            alert('请先选择结算商品');
            return;
        }
        // 把数组转为json格式字符串
        var res = JSON.stringify(cartids);
        location.href="{% url 'home_orderconfirm' %}?cartids="+res
    })

    $(".add").click(function(){
        var t = $(this).parent().find('input[class*=text_box]');
        t.val(parseInt(t.val())+1)
        changenum(t)        
    })
    $('.min').click(function(){
        var t = $(this).parent().find('input[class*=text_box]');
        t.val(parseInt(t.val())-1)
        if(parseInt(t.val())<0){
            t.val(0);
        }
        changenum(t)
    })
    $('.cartnum').blur(function(){
        // 获取当前的val值
        changenum($(this))
    })
    function changenum(t){
        var newnum = Number(t.val())
        var cartid = t.attr('cartid')
        console.log(cartid,newnum)
        // 判断newnum
        if(newnum<1){
            return
        }
        $.get('{% url "home_cartedit" %}',{'cartid':cartid,'num':newnum},function(data){
            // 修改当前购物车商品的小计
            t.parents('ul').find('.J_ItemSum').text(data.totalprice)
            ComputerNumAndPrice()
        },'json')
    }

    //给选框绑定单机事件
    $('.check[name!=select-all]').click(function(){
        ComputerNumAndPrice()
    })
    function ComputerNumAndPrice(){
        var TotalPrice = 0
        var TotalNum = 0
        var cartids = []
        // 获取页面中所有已选元素
        $('.check[name!=select-all]').each(function(){
            var res = $(this).prop('checked')

            if(res){
                // 获取当前元素的小计价格和数量
                TotalPrice +=Number($(this).parents('ul').find('.J_ItemSum').text())
                TotalNum += Number($(this).parents('ul').find('.cartnum').val())
                cartids.push($(this).val())
                console.log(TotalNum)
            }
        })
        $('#J_SelectedItemsCount').text(TotalNum)
        $('#J_Total').text(TotalPrice.toFixed(2))  
        return cartids  

    }
    $("#J_SelectAllCbx2").click(function(){
        $(".check").prop('checked',$(this).prop('checked'))
        ComputerNumAndPrice()
    })

    // 删除商品
     $(".delete").click(function(){
        var sc=$(this).parents('ul').find(".shanchu").val()
        var t = $(this)
        console.log(sc)
        $.get("{% url 'home_cartdel' %}",{'sc':sc},function(data){
            t.parents('ul').remove()
        },'json')

        })
})
</script>
{% endblock %}